import React from 'react';
import { Card,Select,Button,Balloon, Icon} from '@alifd/next';
import { Chart, Geom, Axis,Tooltip, Legend} from 'bizcharts';
import {three as mock} from '../../mock';

import styles from './index.module.scss';

interface ChartItem {
  date?: string;
  value?: number;
}

interface CardConfig {
  title?: string | React.ReactDOM;
  subTitle?: string | React.ReactDOM;
  hint?:string;
  value?: string;
  chartData?: ChartItem[];
  des?: string;
  rate?: string;
  chartHeight?: number;
  chartWidth?: number;
}

const DEFAULT_DATA: CardConfig = {
  subTitle: '总互动量',
  hint:'欢迎查看互动量',                 //提示信息
  value: mock.value,
  chartData: mock.saleList,
  des: '月同比:',
  rate: '10.1',
  chartHeight: 120,
  chartWidth:350,
};

const dataSource = [
  {value: '10001', label: '全年',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10002, label: '1月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10003, label: '2月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10004, label: '3月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10005, label: '4月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10006, label: '5月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10007, label: '6月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10008, label: '7月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10009, label: '8月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10010, label: '9月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10011, label: '10月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10012, label: '11月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
  {value: 10013, label: '12月',xAxis:1,yAxis: Math.floor(Math.random() * 100)},
];

function handleChange(value) {
  console.log(value);
}

export interface FusionCardLineChartProps {
  cardConfig?: CardConfig;
}

const FusionCardLineChart: React.FunctionComponent<FusionCardLineChartProps> = (props: FusionCardLineChartProps): JSX.Element => {
  const {
    cardConfig = DEFAULT_DATA,
  } = props;

  const { title, subTitle, value, chartData,hint, des, rate, chartHeight, chartWidth } = cardConfig;
  const cols ={  sold: { alias: '量' },  genre: { alias: '种类' }}

  //提示信息
  const content = (<div><p>{hint}</p></div>);
  const MoveTarget = <Button size="small" type="primary" style={{margin: '5px'}}><Icon type="atm" /></Button>;
  return (
    <Card free>
      {
        title ? (
          <>
            <Card.Header title={title} />
            <Card.Divider />
          </>
        ) : null
      }
      <Card.Content>
        <div className={styles.subTitle}>
          {subTitle}
          <Balloon trigger={MoveTarget} triggerType="hover">
            {content}
        </Balloon>
        </div>
        <div className={styles.value}>{value}</div>
        <div className={styles.des}><Select useDetailValue defaultValue={{value: '10001', label: '全年'}} onChange={handleChange} dataSource={dataSource} style={{width: 100}} /></div>
        <Chart
          height={chartHeight}
          width={chartWidth}
          data={chartData}
          scale={cols}
          padding={['auto', 'auto']}
        >
          <Axis name="date" />
          <Axis name="value" />
          <Tooltip />
          <Geom type="interval" shape="smooth" position="date*互动量" opacity={0.6} />
          <Legend name="date" visible={false} />
          <Legend name="value" visible={true} />
          {/* <Axis name="xAxis" />
          <Axis name="yAxis" />
          <Tooltip /> */}
          {/* <Geom type="line" position="date*value" shape="smooth" color="#2B7FFB" /> */}
          {/* <Geom type="area" position="date*value" shape="smooth" color="#2B7FFB" opacity={0.1} /> */}
          {/* <Geom type="line" position="date*num" shape="smooth" color="#00D6CB" opacity={1} /> */}
          {/* <Geom type="area" position="date*num" shape="smooth" color="#00D6CB" opacity={0.1} /> */}
        </Chart>
      </Card.Content>
    </Card>
  );
};

export default FusionCardLineChart;
